import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { mockData } from '../utils/mockData';

const SatisfactionStats = () => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      chartInstance.current = echarts.init(chartRef.current);
      updateSatisfactionChart();
    }

    // 窗口大小变化时调整图表尺寸
    const handleResize = () => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);

    // 每5秒更新一次数据
    const interval = setInterval(updateSatisfactionChart, 5000);

    return () => {
      window.removeEventListener('resize', handleResize);
      clearInterval(interval);
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
    };
  }, []);

  const updateSatisfactionChart = () => {
    const result = mockData.satisfactionStats;

    // 处理数据，提取满意度和数量
    const dataList = [];
    const legendData = [];

    result.forEach((item) => {
      const satisfactionType = item.satisfaction_type;
      const count = parseInt(item.satisfaction_count);

      // 只处理有满意度的数据
      if (satisfactionType) {
        dataList.push({
          name: satisfactionType,
          value: count,
        });
        legendData.push(satisfactionType);
      }
    });

    const option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)",
        backgroundColor: "rgba(6, 33, 68, 0.9)",
        borderColor: "#24bbec",
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        orient: "horizontal",
        bottom: 10,
        left: "center",
        textStyle: {
          color: "#a2d3e8",
          fontSize: 14,
        },
        data: legendData,
      },
      series: [
        {
          name: "满意度",
          type: "pie",
          radius: ["50%", "80%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: "#031c3d",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "14",
              fontWeight: "bold",
              color: "#fff",
            },
          },
          labelLine: {
            show: false,
          },
          data: dataList.map((item) => ({
            ...item,
            itemStyle: {
              color:
                item.name === "非常满意"
                  ? "#24d39a"
                  : item.name === "满意"
                  ? "#24bbec"
                  : "#ffc640",
            },
          })),
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDuration: 1000,
        },
      ],
    };

    if (chartInstance.current) {
      chartInstance.current.setOption(option);
    }
  };

  return (
    <div 
      className="satisfaction-container"
      style={{
        display: 'flex',
        height: '100%',
        width: '100%',
        borderRadius: '8px',
        padding: '10px',
        border: '1px solid rgba(36, 187, 236, 0.2)'
      }}
    >
      <div 
        ref={chartRef} 
        id="satisfaction-pie" 
        style={{ height: '100%', width: '100%' }}
      ></div>
    </div>
  );
};

export default SatisfactionStats;